<template>
  <view class="tab-bar d-flex justify-content-between px-4 py-2 rounded-2" style="background-color: #ff9900;">
    <view :key="index" v-for="(item,index) in mainBiz" @click="switchTab(index)"
          class="d-flex flex-column justify-content-center align-items-center"
          :class="{ active: currentIndex === index }">
      <view class="ratio ratio-1x1">
        <image :src="item.icon"></image>
      </view>
      <view class="text-center">{{ item.name }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomTabBar',
  data() {
    return {
      currentIndex: 0,
      mainBiz: [
        {
          name: '业务服务',
          icon: '/static/img/业务.svg',
          link: '/pages/index/index',
          selectedIconPath: '',
        },
        {
          name: '交易服务',
          icon: '/static/img/交易.svg',
          link: '/pages/start/start',
          selectedIconPath: '',
        },
        {
          name: '开户办理',
          icon: '/static/img/开户.svg',
          link: '/pages/start/start',
          selectedIconPath: '',
        },
      ]
    };
  },
  methods: {
    switchTab(index) {
      const tab = this.mainBiz[index];
      if (index !== 0) {
        uni.navigateTo({
          url: tab.link,
        });
        return
      }
      uni.switchTab({
        url: tab.link,
      });
      this.currentIndex = index;
    }
  }
};
</script>

<style>
.active {
  border-bottom: 2px solid #3cc51f;
}
</style>